<template>
	<view class="content">
		<view class="user-msg">
			<image src="../../static/images/icon-pig-brother.jpg" mode="" class="icon"></image>
			<text>朱大哥的养猪场</text>
		</view>
		
		<view class="videos">
			<view class="video">
				<text>A区</text>
				<image :src="src1" mode=""></image>
			</view>
			<view class="video">
				<text>B区</text>
				<image :src="src1" mode=""></image>
			</view>
			<view class="video">
				<text>C区</text>
				<image :src="src1" mode=""></image>
			</view>
		</view>
		
		<view class="configs">
			<text class="title">设置</text>
			<view class="config">
				<text>摄像头总开关</text><switch :checked="true" @change="openAll" />
			</view>
<!-- 			<view class="config">
				<text>关闭所有摄像头</text><switch checked="true" @change="" />
			</view> -->
			<view class="config">
				<text>移除配置</text>
				<image src="../../static/images/delete.png" mode="" class="delete"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		// computed: {
		// 	...mapState(['hasLogin', 'forcedLogin'])
		// },
		data(){
			return{
				lock:true,
				open_src:"../../static/images/video6.gif",
				close_src:"../../static/images/video6-close.jpg",
				src1:"../../static/images/video6.gif"
			}
		},
		methods: {
			// bindLogin() {
			// 	uni.navigateTo({
			// 		url: '../login/login',
			// 	});
			// },
			openAll(e){
				let value=e.detail.value;
				if(value==true){
					this.src1=this.open_src;
					
				}else{
					this.src1=this.close_src;
				}
			},
			bindLogout() {
				this.logout();
				/**
				 * 如果需要强制登录跳转回登录页面
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '../login/login',
					});
				}
			}
		}
	}
</script>

<style scoped>
	.content{
		margin: 0;
		background: #f9f9f9;
	}
	.user-msg{
		margin-top: 5%;
		display: flex;
		flex-direction: column;
	}
	.icon{
		margin: 0 auto;
		width: 110px;
		height: 110px;
		border-radius: 50px 50px;
	}
	.user-msg text{
		margin: 3% auto 0 auto;
		font-size: 18px;
		font-weight: bold;
	}
	
	.videos{
		margin-top: 2%;
		display: flex;
		flex-direction: row;
	}
	.video{
		margin-left: 4%;
		width: 30%;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		padding: 1% 0 1% 0;
		text-align: center;
	}
	.video image{
		margin: 3% auto 0 auto;
		width: 100%;
		height: 70px;
	}
	
	
	.configs{
		margin-top: 5%;
		display: flex;
		flex-direction: column;
	}
	.title{
		color: #bbb;
	}
	.config{
		margin-top: 10%;
		padding-bottom: 5%;
		border-bottom: #eee solid 3px;
	}
	.configs view switch{
		float: right;
	}
	
	.remove{
		display: flex;
		margin-top: 3%;
	}
	.delete{
		width: 30px;
		height: 30px;
		float: right;
		margin-right: 5%;
	}
	.remove text{

	}
</style>
